<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>XXX水疗管理系统</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			function pagerFilter(data){
	            if (!data.topRows){	            	
	            	data.topRows = [];
	            	data.childRows = [];
	            	for(var i=0; i<data.rows.length; i++){
	            		var row = data.rows[i];
	            		row._parentId ? data.childRows.push(row) : data.topRows.push(row);
	            	}
	            }  
 
				data.rows = $.extend(true,[],data.topRows.concat(data.childRows));
				return data;
			}
			
			function onQuery(){
				$('#tg').treegrid({
					url: 'queryCategory.do',
					pageNumber:1,		
					queryParams:{categoryName:$.trim($('#categoryName').val())}
				});
			}
			
			function onReset(){
				$("#categoryName").val('');
			}
		</script>
	</head>
	
	<body>
		<table id="tg" class="easyui-treegrid" title="Client Side Pagination" style="width:700px;height:250px"
			data-options="
				title: '商品分类列表',
				toolbar:'#tb',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				fit:true,
				url: 'queryCategory.do',
				idField: 'id',
				treeField: 'product_category_name',
				loadFilter: pagerFilter,
				pagination: true,
				pageSize: 2,
				pageList: [2,5,10]
			">
		<thead>
			<tr>
				<th data-options="field:'product_category_name',width:100">商品名称</th>
				<th data-options="field:'description',width:600,align:'left'">商品描述</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:5px;height:auto">
			<div style="margin-bottom:5px">
				<a href="initAddCategory" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
			</div>
			
			<form id="queryUserForm" name="queryUserForm" action="queryUser" method="post">
			<div>				
				商品名称: <input class="easyui-validatebox" name="categoryName" id="categoryName" style="width:120px">
				&nbsp;&nbsp;
				<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
				<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
			</div>
			</form>
		</div>
	
	</body>
</html>